Werken met statische bestanden in ASP.NET Core

Statische bestanden, zoals HTML, CSS, afbeeldingen en JavaScript, zijn assets die een ASP.NET Core app rechtstreeks aan clients kunnen serveren.

Bronnen

Working with static files in ASP.NET Core, ‎04‎/‎07‎/‎2017

Voorbeeld

We gaan een html pagina toevoegen aan het aspdotnet project dat we in Een leeg ASP.NET Core project maken gemaakt hebben.
We doen dat op Cloud9. Open je workspace op Cloud9.
Maak een map met de naam images in de wwwoot map en sleep het logo van de Postcode App daarnaartoe.

Maak in de map wwwroot een index.html bestand met daarin:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Postcode App</title>
</head>
<body>
    <h1>Postcode App</h1>
    <img src="images/postcode-logo.jpg" alt="Logo Postcode App"/>
</body>
</html>

Vermits we op Cloud9 ontwikkelen moeten we ervoor zorgen dat de app op de juiste poort luistert:

namespace aspdotnet
{
    public class Program
    {
        public static void Main(string[] args)
        {
            BuildWebHost(args).Run();
        }
    
        public static IWebHost BuildWebHost(string[] args) =>
            WebHost.CreateDefaultBuilder(args)
                .UseStartup<Startup>()
                .UseUrls("http://0.0.0.0:8080")
                .Build();
    }
}

Om statische bestanden te kunnen serveren, moet je de middleware zo configureren dat statische bestanden aan de pipeline toegevoegd kunnen worden. De static file middleware kan worden geconfigureerd door het pakket Microsoft.AspNetCore.StaticFiles toe te voegen aan je project en vervolgens de UseStaticFiles methode op te roepen in de Startup.Configure methode:

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    app.UseStaticFiles();
    app.Run(async (context) =>
    {
        await context.Response.WriteAsync("Hello World!");
    });}

Ga naar de dotnetcore/aspdotnet map en run de app:

Cloud9 Run aspdotnet project

In de terminal:
1. cd dotnetcore/aspdotnet
2. dotnet run
3. rechtermuisklik http://0.0.0.8080
4. open
Dat is het resultaat:

aspdotnet web result dotnet run
De index.html pagina wordt niet geladen. Om die te laden type je achter de url /index.html:

aspdotnet web result static files added dotnet run
In ASP.NET Core is het mogelijk om aan te geven dat wanneer een url wordt opgegeven automatisch een default pagina wordt ingeladen. Standaard zijn dat:
- default.htm
- default.html
- index.htm
- index.html
Om aan te geven dat één van die pagina's geladen moet worden voeg je app.UseDefaultFiles toe aan de Configure methode. Zorg ervoor dat je die vóór app.useStaticFiles plaatst:
```
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    app.useDefaultFiles();    
    app.UseStaticFiles();
}
```
Run de app opnieuw, in de terminal:
1. dotnet run
2. rechtermuisklik http://0.0.0.8080
3. open
Nu wordt de default pagina index.html automatisch geladen.
Synchroniseer je Cloud9 workspace met je lokale computer:
1. Op Cloud9:
  1. ga naar de root van je workspace: cd /home/ubuntu/workspace
  2. git status
  3. git add --all
  4. git commit -m "aspdotnet statische pagina toegevoegd op Cloud9"
  5. indien nodig: git remote add origin https://JosephInghelbrecht@bitbucket.org/JosephInghelbrecht/programmeren-3.git
  6. git pusch -u origin master
2. Op je lokale computer:
  1. indien nodig: git remote add origin https://JosephInghelbrecht@bitbucket.org/JosephInghelbrecht/programmeren-3.git
  2. git pull origin master

2017-10-18 15:15:56